<template>
	<view class="header" :style="{paddingTop: pageTitle ? 0 : '90rpx'}">
		<u-navbar 
			:customBack="customBack"
			v-if="level > 0 && !$isWeixin()"
			:border-bottom="false"
			:titleBold="true"
			titleColor="#fff"
			back-icon-color="#fff"
			:background="{ backgroundColor: 'transparent' }"
			:is-back="level > 0"
			:title="pageTitle"
		></u-navbar>
		<view class="u-flex u-row-between" :style="{paddingTop: $isWeixin() && pageTitle ? '80rpx': '0'}">
			<view class="left">
				<u-avatar :src="vuex_user.HeadPic"></u-avatar>
				<view class="left-name">
					<text class="name">{{ vuex_user.Name }}</text>
					<text class="status">{{vuex_user.HierarchyName}}</text>
				</view>
			</view>
			<view class="right">
				<u-image style="position: relative; top: -20rpx;" @tap="logout" :width="60" :height="60" src="@/static/images/exit.png"></u-image>
				<slot name="right"></slot>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'user-header',
	props: {
		level: {
			type: [Number, String],
			default: 1
		},
		pageTitle: {
			type: String,
			default: ''
		}
	},
	
	created() {
		if(this.$isWeixin()) {
			this.$setTitle(this.title);
		}
	},
	data() {
		return {};
	},
	
	methods: {
		customBack() {
			if(this.level == 1) {
				uni.reLaunch({
					url: '/pages/home/home'
				})
			}
			if(this.level == 2) {
				uni.navigateTo({
					url: '/pages/home/dealer/index'
				})
			}
			if(this.level == 3) {
				uni.navigateBack()
			}
		},
		
		
		logout() {
			let me = this;
			uni.showModal({
				title: '是否确定退出?',
				confirmText: '退出',
				success(e) {
					if(e.confirm) {
						me.$u.vuex('vuex_user', '');
						uni.reLaunch({
							url: '/pages/login/index'
						})
					}
				}
			})
		}
	}
};
</script>
<style lang="scss" scoped>
.header {
	height: 284rpx;
	padding: 0 30rpx;
	background: url(@/static/images/home/home.jpg) no-repeat;
	background-size: cover;

	display: flex;
	flex-direction: column;
	// justify-content: space-between;

	.left {
		display: flex;
		flex-direction: row;

		.left-name {
			display: flex;
			flex-direction: column;
			margin-left: 35rpx;

			.name {
				font-size: 35rpx;
				font-family: NotoSansHans;
				font-weight: bold;
				color: #fffffe;
				line-height: 55rpx;
			}

			.status {
				font-size: 22rpx;
				font-family: NotoSansHans;
				font-weight: 400;
				color: #fffffe;
				line-height: 38rpx;
			}
		}
	}

	.right {
		display: flex;
		flex-direction: column;
	}
}
</style>
